<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta  name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻发布</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <script src="/static/js/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="../../static/css/me.css">
    <link rel="stylesheet" href="../../static/css/animate.compat.css">
   
</head>
<body>
    <!-- 导航 -->
    <nav th:replace="admin/_fragments :: menu(0)" class="ui secondary attached m-opacity-mid segment m-mini m-shadow animated fadeInDown">
        <div class=" ui container">
            <div class="ui secondary stackable menu">
                <h1 class="ui violet header item">GDPU NEWS Manager</h1>
                    <a href="#" class="active m-item item m-mobile-hide"><i class="home icon"></i>管理</a>
                    <a href="#" class="m-item item m-mobile-hide"><i class="folder icon"></i> 分类</a>
             
                    <a href="#" class="m-item item m-mobile-hide"> <i class="tags icon"></i>标签</a>
                   
                    <!-- 头像 -->
                    <div class="right m-mobile-hide menu">
                        <div class="ui dropdown item">
                        <div class="text">
                            <img src="/static/images/tx1.jpg" alt="" class="ui image">
                            大鸡巴
                        </div>
                        <i class="dropdown icon"></i>
                            <div class="menu">
                                <a href="#" class="item">注销</a>
                            </div>
                        
                        </div>
                    </div>

            <a href="" class="ui menu toggle blue icon button m-right-top m-mobile-show">
                <i class="sidebar icon">

                </i>
            </a>

        </div>
        </div>

    </nav>

    <!-- 二级导航 -->
    <div class="ui attached secondary pointing menu m-container-small animated fadeInDown">
        <a href="" th:href="@{/admin/news/input}" class="item active blue">发布</a>
        <a href="" th:href="@{/admin/news}" class=" item">列表</a>
    </div>


    <!-- 中间内容 -->
    <main class="m-large m-container-small animated fadeInUp">
       <div class="ui container">
            <form id="news-form" th:object="${news}" th:action="@{/admin/news}" method="post" class="ui form">
                <input type="hidden" name="published">
                <input type="hidden" name="id" th:value="*{id}">
                <div class="required field">
                <div class="ui left labeled input">
                    <div class="ui selection compact dropdown label">
                        <input type="hidden" value="原创" name="flag" th:value="*{flag}">
                        <i class="dropdown icon"></i>
                        <div class=" text">原创</div>
                        <div class="menu">
                            <div class="item" data-value="原创">原创</div>
                            <div class="item" data-value="转载">转载</div>
                        </div> 
                    </div>
                        <input type="text" name="title" placeholder="标题" th:value="*{title}">
                    </div>
                </div>

                <div class="required field">
                    <div id="md-content" style="z-index: 1 !important;">

                    <textarea name="content" placeholder="新闻内容" style="display: none" th:text="*{content}">
                    </textarea>
                    </div>
                </div>
                <div class="two fields">
                    <div class="required field">
                        <div class="ui left labeled basic input">
                            <label  class="ui purple basic label">
                                <i class="folder open outline icon"></i>
                                分类</label>
                            <div class="ui fluid selection dropdown">
                                <input type="hidden" name="type.id" th:value="*{type}!=null ? *{type.id}">
                                <i class="dropdown icon"></i>
                                    <div  class="default text">分类</div>
                                    <div class="menu">
                                        <div th:each="type : ${types}" th:data-value="${type.id}" th:text="${type.name}" class="item" data-value="1">国际要闻</div>

                                    </div>
                            </div>
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui right labeled basic input">
                            <label  class="ui purple basic label">
                                <i class="tags icon"></i>
                                标签</label>
                            <div class="ui tag fluid multiple search selection dropdown">
                                <input type="hidden" name="tagIds" th:value="*{tagIds}">
                                <i class="dropdown icon"></i>
                                    <div class="default text">标签</div>
                                    <div class="menu">
                                        <div th:each="tag : ${tags}" th:data-value="${tag.id}" th:text="${tag.name}" class="item" data-value="1">java</div>

                                    </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="required field">
                    <div class="ui left labeled input">
                    <label class="ui purple label">首图</label>
                    <input type="text" name="firstPicture" th:value="*{firstPicture}" placeholder="图片引用地址" >
                    </div>
                </div>

                <div class="required field">
                    <textarea name="description" th:text="*{description}" placeholder="新闻概述..." maxlength="200"></textarea>
                </div>

                <div class="inline fields">
                    <div class="field">
                        <div class="ui checkbox">
                            <input type="checkbox" id="recommend" name="recommend" checked th:checked="*{recommend}" class="hidden" >
                            <label for="recommend">推荐</label>
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui checkbox">
                            <input type="checkbox" id="share" name="share" th:checked="*{share}" class="hidden" >
                            <label for="share">转载声明</label>
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui checkbox">
                            <input type="checkbox" id="appreciation" th:checked="*{appreciation}" name="appreciation" class="hidden" >
                            <label for="appreciation">赞赏</label>
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui checkbox">
                            <input type="checkbox" id="comment" th:checked="*{comment}" name="comment" class="hidden" >
                            <label for="comment">评论</label>
                        </div>
                    </div>
                </div>

                <div class="ui error message"></div>

                <div class="ui right aligned container">
                    <button type="button" class="ui button" onclick="window.history.go(-1)">返回</button>
                    <button type="button" id="save-btn" class="ui green button">保存</button>
                    <button type="button" id="publish-btn" class="ui orange button">发布</button>
                </div>

            </form>
       </div>
       



    </main>

    <br>
    <br>
    <br>

    <!-- 底部 -->
    <footer th:replace="admin/_fragments :: footer" class="ui secondary m-opacity-mid vertical segment m-massive m-shadow">
        <div class="ui center aligned container">
            <div class="ui secondary divided stackable grid">
                <div class="three wide column">
                        <img src="/static/images/gdpu.jpg" class="ui rounded image" alt="" style="width: 150px;">
                </div>
                <div class="three wide column">
                    <h4 class="ui purple header">最新新闻</h4>
                    <div class="ui link list">
                        <a href="" class="item">国家大事</a>
                        <a href="" class="item">校园趣闻</a>
                        <a href="" class="item">日常</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui purple header">联系小编</h4>
                    <div class="ui link list">
                        <a href="" class="item">1135848912@qq.com</a>
                        <a href="" class="item">广药五栋</a>
                        
                    </div>
                </div>
                <div class="seven wide column">
                    <h4 class="ui purple header">GDPU NEWS</h4>
                    <a href="" class="item">这是一个分享日常生活新闻，国家新闻的网站</a>
                </div>
            </div>

            <h3 class="ui horizontal black divider">splict </h3>
            <h5 class="ui grey header">Copyright @2020-2021 GDPU NEWS Designed By Retroxxx</h5>
        </div>




    </footer>

    <!--/*/<th:block th:replace="admin/_fragments :: script">/*/-->
    <script src="../../static/js/semantic.min.js"></script>
    <script src="../../static/lib/editormd/editormd.min.js"></script>
    <!--/*/</th:block>/*/-->
    <script>

        //初始化Markdown编辑器
        var contentEditor;
        $(function() {
            contentEditor = editormd("md-content", {
                width   : "100%",
                height  : 640,
                syncScrolling : "single",
//        path    : "../static/lib/editormd/lib/"
                path    : "/lib/editormd/lib/"
            });
        });



        $('.menu.toggle').click(function(){
            $('.m-item').toggleClass('m-mobile-hide');

        });
        $('.ui.dropdown').dropdown({
            on:'hover'
        });
        $('.ui.tag.dropdown')
            .dropdown({
            allowAdditions:true

        });
        $('#save-btn').click(function () {
            $('[name="published"]').val(false);
            $('#news-form').submit();
        });
        $('#publish-btn').click(function () {
            $('[name="published"]').val(true);
            $('#news-form').submit();
        });


        $('.ui.form').form({
            fields: {
                title : {
                    identifier:'title',
                    rules: [{
                        type:'empty',
                        prompt:'标题：请输入新闻标题'
                    }]
                },
                firstPicture : {
                    identifier:'firstPicture',
                    rules: [{
                        type:'empty',
                        prompt:'图片：请输入图片引用地址'
                    }]
                },
                content : {
                    identifier:'content',
                    rules: [{
                        type:'empty',
                        prompt:'图片：请输入图片引用地址'
                    }]
                },
                typeId : {
                    identifier:'typeId',
                    rules: [{
                        type:'empty',
                        prompt:'图片：请输入图片引用地址'
                    }]
                },
                description : {
                    identifier: 'description',
                    rules: [{
                        type : 'empty',
                        prompt: '概述：请输入新闻概述'
                    }]
                }
            }
        });
        

   
    </script>
   

</body>
</html>